/* 适配 */
window.addEventListener('resize', setRem)

/* 存储数据 */
var state = {
  totalData: [
    // { id: '1', name: '企业数', value: '0', max: '2100000' },
    { id: '2', name: '创建应用数', value: '0', max: '88190' },
    { id: '3', name: '开发者数', value: '0', max: '213895' },
    { id: '4', name: '在线会话数', value: '0', max: '3356796' },
    { id: '5', name: '服务调用量', value: '0', max: '5414260' },
  ],
  menuData: [
    { id: '1', name: '认知图谱', url: '' },
    { id: '2', name: '地址解析', url: '' },
    { id: '3', name: '要素抽取', url: '' },
    { id: '4', name: '事件抽取', url: '' },
    { id: '5', name: '文字识别', url: '' },
    { id: '6', name: '人脸识别', url: '' },
    { id: '7', name: '票据识别', url: '' },
    { id: '8', name: '卡证识别', url: '' },
    { id: '9', name: '图像识别', url: '' },
    { id: '10', name: '自然语言处理', url: '' },
    { id: '11', name: '语音识别', url: '' },
    { id: '12', name: '语音合成', url: '' },
    { id: '13', name: '语音分析', url: '' },
    { id: '14', name: '公安认知', url: '' },
    { id: '15', name: '金融认知', url: '' },
    { id: '16', name: '制造认知', url: '' },
    { id: '17', name: '医疗认知', url: '' },
    { id: '18', name: '消费认知', url: '' },
    { id: '19', name: '教育认知', url: '' },
    { id: '20', name: '建筑认知', url: '' }
  ],
  countData: [
    {
      id: '1',
      name: '在线会话数',
      value: '0',
      max: '37666008',
      unit: '',
    },
    {
      id: '2',
      name: '开发团队数',
      value: '0.00',
      max: '13.26',
      unit: '%',
    },
    {
      id: '3',
      name: '应用数',
      value: '0',
      max: '5061',
      unit: '个',
    },
  ],
  // 用户行业列表
  userIndustryList: [
    { value: 16.24, name: '租赁和商务服务业' },
    { value: 14.65, name: '制造业' },
    { value: 9.43, name: '教育' },
    { value: 9.12, name: '居民服务、修理和其他服务业' },
    { value: 9.05, name: '科学研究和技术服务业' },
    { value: 9.01, name: '批发和零售业' },
    { value: 8.85, name: '信息传输、软件和信息技术服务业' },
    { value: 7.81, name: '文化、体育和娱乐业' },
    { value: 6.15, name: '水利、环境和公共设施管理业' },
    { value: 5.49, name: '卫生和社会工作' },
    { value: 4.21, name: '其它' },
  ],
  // 应用热度分布
  appHeadList: [
    { name: '教育学习', value: 36.37 },
    { name: '通讯社交', value: 20.57 },
    { name: '购物消费', value: 10.23 },
    { name: '便捷生活', value: 8.15 },
    { name: '办公商务', value: 7.15 },
    { name: '智能硬件', value: 6.89 },
    { name: '影音视听', value: 2.57 },
    { name: '金融理财', value: 1.39 },
    { name: '出行导航', value: 1.33 },
    { name: '新闻阅读', value: 1.12 },
    { name: '游戏', value: 1.09 },
    { name: '运动健康', value: 1.02 },
    { name: '系统安全', value: 0.86 },
    { name: '摄影摄像', value: 0.39 },
    { name: '儿童亲子', value: 0.22 },
    { name: '女生频道', value: 0.14 },
    { name: '主题壁纸', value: 0.14 },
  ],
};


window.onload = function() {
  document.getElementById('full').className = 'on gaia-page full-screen'
  setRem()
  
  state.totalData.forEach(function(item) {
    renderMax('totalData', item.id, item.value, item.max);
  })
  
  state.countData.forEach(function(item) {
    renderMax('countData', item.id, item.value, item.max, item.unit === '%' ? 2 : 0);
  })
  renderMenuData()
  renderUserJobChart()
  renderAppHeatChart()
  render()
}


function render() {
  renderTotalData()
  renderCountData()
}


/* 渲染totalData */
function renderTotalData() {
  var node = document.getElementById('totalData')
  node.innerHTML = ''
  state.totalData.forEach(function(item, idx) {
    node.innerHTML += `
      <div class="total-item total-item-${idx + 1}">
        <img src="./static/image/total-icon-${idx + 1}.png" class="icon" />
        <div class="info-box">
          <div class="value">${renderMoney(item.value)}</div>
          <div class="name">${item.name}</div>
        </div>
      </div>
    `
  })
}


/* 渲染menuData */
function renderMenuData() {
  var node = document.getElementById('menuData')
  node.innerHTML = ''
  state.menuData.forEach(function(item, idx) {
    node.innerHTML += `
      <div class="menu-item">
        <div class="icon">
          <img src="./static/image/func/ico-${idx + 1}.svg" alt="" />
        </div>
        <div class="name">${item.name}</div>
      </div>
    `
  })
}

/* 渲染countData */
function renderCountData() {
  var node = document.getElementById('countData')
  node.innerHTML = ''
  state.countData.forEach(function(item, idx) {
    node.innerHTML += `
      <div class="container-center-item">
        <div class="top">
          <img src="./static/image/center-icon-${idx + 1}.svg" alt="" class="icon" />
          <span class="name">${item.name}</span>
        </div>
        <div class="bottom">
          ${idx === 0 ? renderMoney(item.value) : item.value}
          ${item.unit}
        </div>
      </div>
    `
  })
}

/* 渲染用户行业列表图表 */
function renderUserJobChart() {
  var data = JSON.parse(JSON.stringify(state.userIndustryList));
  var total = data.reduce((sum, item) => sum + item.value, 0);
  var myChart = echarts.init(document.getElementById('userJobChart'));
  var colors = ['#ff8a00', '#61f9b3', '#1370e4', '#00e4ff','#3265de','#44acfa','#5af5e5','#54ee91','#dfeb73','#f3af76','#d22b7b'];
  var option = {
    toolbox: {
      show: false,
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: [0, '80%'],
        center: ['50%', '50%'],
        roseType: 'radius',
        selectedMode: 'single',
        labelLine: {
          show: true,
          length: 0,
        },
        itemStyle: {
          borderRadius: 0,
        },
        color: colors,
        data: data.map((item, index) => {
          item.label = {
            color: colors[index],
            // formatter: '{b}\n{c|{c}}',
            formatter() {
              return `${item.name} \n ${item.value}%\n———————`;
            },
            selectedMode: false,
            rich: {
              c: {
                lineHeight: 24,
              },
            },
          };
          return item;
        }),
      },
    ],
  };
  option && myChart.setOption(option);
  window.addEventListener('resize', myChart.resize);
}

/* 渲染应用热度分布图表 */
function renderAppHeatChart() {
  var data = JSON.parse(JSON.stringify(state.appHeadList));
  var total = data.reduce((sum, item) => sum + item.value, 0);
  var myChart = echarts.init(document.getElementById('appHeatChart'));
  var colors = [
    '#3265de',
    '#44acfa',
    '#5af5e5',
    '#54ee91',
    '#dfeb73',
    '#f3af76',
    '#f17777',
    '#f34279',
    '#d22b7b',
    '#6542fc',
    '#54ee91',
    '#dfeb73',
    '#f3af76',
    '#f17777',
    '#f34279',
    '#d22b7b',
    '#6542fc',
  ];
  var option = {
    toolbox: {
      show: false,
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['50%', '80%'],
        center: ['50%', '50%'],
        selectedMode: 'single',
        labelLine: {
          show: true,
        },
        itemStyle: {
          borderRadius: 0,
        },
        color: colors,
        data: data.map((item, index) => {
          item.label = {
            color: colors[index],
            borderColor: 'red',
            borderWidth: '1px',
            formatter() {
            //   return `${item.name} ${((item.value * 100) / total).toFixed(2)}%\n———————`;
            return `${item.name} ${item.value}%\n———————`;
            },
            selectedMode: false,
          };
          return item;
        }),
      },
    ],
  };
  option && myChart.setOption(option);
  window.addEventListener('resize', myChart.resize);
}